<template>
  <el-card>
    <el-form :model="searchParam" :inline="true">
      <el-form-item label="岗位编码">
        <el-input
          v-model="searchParam.postCode"
          placeholder="请输入岗位编码"
          clearable
          @keyup.enter="getTableData"
        />
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input
          v-model="searchParam.postName"
          placeholder="请输入岗位名称"
          clearable
          @keyup.enter="getTableData"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchParam.status"
          placeholder="请选择岗位状态"
          @keyup.enter="getTableData"
        >
          <el-option
            v-for="(value, key, index) in postStatus"
            :key="index"
            :label="value"
            :value="key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <commonBtn
          :value="'搜索'"
          :type="'primary'"
          :icon="'search'"
          :plain="true"
          @click="getTableData"
        ></commonBtn>
        <commonBtn
          :value="'重置'"
          :icon="'refresh'"
          @click="refreshBtn"
        ></commonBtn>
      </el-form-item>
    </el-form>
    <el-row>
      <commonBtn
        :value="'新增'"
        :type="'primary'"
        :icon="'plus'"
        :plain="true"
        @click="addPostFn"
      ></commonBtn>
      <commonBtn
        :value="'删除'"
        :type="'danger'"
        :icon="'delete'"
        :plain="true"
        :disabled="ids.length === 0"
        @click="delPostFn"
      ></commonBtn>
    </el-row>
    <el-table
      :data="searchParam.data"
      @selection-change="handleSelectionChange"
      ref="multipleTableRef"
      v-loading="isLoad"
    >
      <el-table-column type="selection" width="55" class="center" />
      <el-table-column label="岗位编号" align="center" show-overflow-tooltip>
        <template #default="scope">
          {{ (searchParam.current - 1) * searchParam.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="postCode"
        label="岗位编码"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="postName"
        label="岗位名称"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="postSort"
        label="岗位排序"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '0'">{{
            scope.row.statusDict
          }}</el-tag>
          <el-tag type="danger" v-if="scope.row.status == '1'">{{
            scope.row.statusDict
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <editBtn :value="'编辑'" @click="editPostFn(scope.row)" />
          <delBtn :value="'删除'" @click="delPostOne(scope.row.postId)" />
        </template>
      </el-table-column>
    </el-table>
    <pag
      :showPage="true"
      :pageData="searchParam"
      @getTableData="getTableData"
    />
    <addEdit
      :layer="layer"
      :statusArr="postStatus"
      @getTableData="getTableData"
      v-if="layer.show"
    ></addEdit>
  </el-card>
</template>
<script>
import { defineComponent, ref, reactive } from "vue";
import commonBtn from "_c/commonBtn/index.vue";
import { queryDict } from "@/api/dictValue.js";
import { getData, delBatch } from "@/api/post.js";
import editBtn from "_c/editBtn/index.vue";
import delBtn from "_c/delBtn/index.vue";
import pag from "_c/pag/index.vue";
import addEdit from "./addEdit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  components: {
    commonBtn,
    editBtn,
    delBtn,
    pag,
    addEdit,
  },
  setup() {
    //表格加载
    const isLoad = ref(true);
    //批量删除时使用
    const ids = ref([]);
    // 弹窗控制器
    const layer = reactive({
      show: false,
      title: "新增",
      showButton: true,
      width: 500,
    });
    //搜索条件
    const searchParam = reactive({
      postCode: "", //岗位编码
      postName: "", //岗位名称
      status: "", //岗位状态
      current: 1, //页码
      size: 10, //每页显示条数
      total: 0, //数据总数
      data: [], //列表数据
    });
    //岗位状态【下拉框数据】
    const postStatus = ref({});
    //查询数据字典值
    const queryDictValue = async () => {
      const { data } = await queryDict("post_status");
      postStatus.value = data;
    };
    //获取列表数据
    const getTableData = async () => {
      let params = {
        pageNum: searchParam.current,
        pageSize: searchParam.size,
        postCode: searchParam.postCode || undefined,
        postName: searchParam.postName || undefined,
        status: searchParam.status || undefined,
      };
      const { data, success } = await getData(params);
      if (success) {
        searchParam.data = data.records;
        searchParam.total = parseInt(data.total);
        isLoad.value = false;
      }
    };
    //重置搜索条件
    const refreshBtn = () => {
      searchParam.postCode = "";
      searchParam.postName = "";
      searchParam.status = "";
      getTableData();
    };
    //新增岗位弹框
    const addPostFn = () => {
      layer.title = "新增岗位";
      layer.show = true;
      delete layer.row;
    };
    //编辑岗位弹框
    const editPostFn = (row) => {
      layer.title = "编辑岗位";
      layer.show = true;
      layer.row = row;
    };
    //多选操作
    const handleSelectionChange = (val) => {
      ids.value = [];
      if (val) {
        if (val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            ids.value.push(val[i]["postId"]);
          }
        }
      }
    };
    //异步删除方法
    const delPost = async () => {
      const { success } = await delBatch(ids.value);
      if (success) {
        ids.value = [];
        getTableData();
        ElMessage.success("操作成功！");
      }
    };
    //批量删除操作
    const delPostFn = () => {
      if (ids.value.length === 0) {
        return;
      }
      ElMessageBox.confirm("您确认要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delPost();
        })
        .catch(() => {
          if (!id) {
            proxy.$refs["multipleTableRef"].clearSelection();
          }
        });
    };
    //删除单个
    const delPostOne = (id) => {
      ids.value = [];
      if (id) {
        ids.value.push(id);
        ElMessageBox.confirm("您确认要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delPostFn();
          })
          .catch(() => {
            ids.value = [];
            ElMessage.info("取消成功！");
          });
      }
    };
    //挂载前调用
    queryDictValue();
    getTableData();

    return {
      isLoad,
      ids,
      searchParam,
      postStatus,
      getTableData,
      refreshBtn,
      layer,
      addPostFn,
      editPostFn,
      handleSelectionChange,
      delPostFn,
      delPostOne,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: left;
}
.el-table {
  margin-top: 15px;
}
</style>
